<template>
    <h2 class="title">组合响应式</h2>
    <pre>
        <code>
          import { ref,reactive,toRefs, toRef } from 'vue';

            /**
            * ref
            * 大多数时候还是基础数据类型使用比较合适
            */
            const title = ref('Vue2');

            const count = ref(100)

            // 打印取值是通过 *.value
            console.log(title.value, count.value)

            /**
            * reactive
            * 引用类型使用比较合适
            * 可以省的使用 *.value方式先取值，简便操作
            */
            const person = reactive({
              name: 'Vue2',
              age: 100
            })
            console.log(person.name, person.age)

            /**
            * reactive有局限性，无法整个替换对象，只能替换其中的某个属性
            */
            person.name = 'Vue3'
            person.age = 200
            /**
            * 如果想替换多个属性，需要使用Object.assign
            */
            Object.assign(person, {
              name: 'Vue3',
              age: 200
            })
            /**
            * 否则需要用ref方式响应式声明对象，然后替换value
            */
            const person2 = ref({
              name: 'Vue3',
              age: 200
            })
            person2.value = {
              name: 'Vue4',
              age: 500
            }


            /**
            * toRefs
            * 解构为响应式值，同时修改name 和 age 也会修改person的值
            * 理解相当于引用传递
            * 
            */
            const { name, age } = toRefs(person)
            console.log(name.value, age.value)

            /**
            * toRef
            * 单个抽取
            * 功能同上
            */
            const pname = toRef(person, 'name')

        </code>
      </pre>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, toRef } from 'vue';

/**
 * ref
 * 大多数时候还是基础数据类型使用比较合适
 */
const title = ref('Vue2');

const count = ref(100)

// 打印取值是通过 *.value
console.log(title.value, count.value)

/**
 * reactive
 * 引用类型使用比较合适
 * 可以省的使用 *.value方式先取值，简便操作
 */
const person = reactive({
  name: 'Vue2',
  age: 100
})
console.log(person.name, person.age)

/**
 * reactive有局限性，无法整个替换对象，只能替换其中的某个属性
 */
person.name = 'Vue3'
person.age = 200
/**
 * 如果想替换多个属性，需要使用Object.assign
 */
Object.assign(person, {
  name: 'Vue3',
  age: 200
})
/**
 * 否则需要用ref方式响应式声明对象，然后替换value
 */
const person2 = ref({
  name: 'Vue3',
  age: 200
})
person2.value = {
  name: 'Vue4',
  age: 500
}


/**
 * toRefs
 * 解构为响应式值，同时修改name 和 age 也会修改person的值
 * 理解相当于引用传递
 * 
 */
const { name, age } = toRefs(person)
console.log(name.value, age.value)

/**
 * toRef
 * 单个抽取
 * 功能同上
 */
const pname = toRef(person, 'name')

</script>

<style scoped></style>